import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import styles from './Layout.less';
import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Button,
  Modal,
  Tag,
  message,
  Badge,
  Radio,
  Upload,
  Icon,
} from 'antd';

import GoodsModal from 'components/Content/GoodsModal';

const FormItem = Form.Item;
const { CheckableTag } = Tag;
const Search = Input.Search;
const RadioGroup = Radio.Group;
const RadioButton = Radio.Button;

@connect(({ padRecomm, loading }) => ({
  padRecomm,
  channelTree: padRecomm.channelTree,
  goodsList: padRecomm.goodsList,
  loading: loading.models.padRecomm,
}))
@Form.create()
export default class LayoutDetail0 extends PureComponent {
  constructor(props) {
    super(props);

    console.log('初始化数据', this.props.layoutDetail);
    // this._queryDetailList(this.props.layoutDetail.layoutId);
    // this._setDetail(this.props.layoutDetail.detailList);

    this.state = {
      detailList: this.props.layoutDetail.detailList,
      detail: (this.props.layoutDetail.detailList && this.props.layoutDetail.detailList.length > 0) ?
        this.props.layoutDetail.detailList[0] : {},
      fileList: [],

      goodsModalVisible: false,
    }
  }


  componentWillReceiveProps(nextProps) {
    // console.log('nextProps=========', nextProps)
    // if (nextProps.layoutDetail && (nextProps.layoutDetail.layoutId) && (nextProps.layoutDetail != this.props.layoutDetail)) {
    //   this._queryDetailList(nextProps.layoutDetail.layoutId)
    // }
  }

  _goodsSearch(fieldsValue) {
    console.log(1111111111);
    // this.props.goodsSearch(fieldsValue)
  }

  _queryDetailList(layoutId) {
    this.props.dispatch({
      type: 'padRecomm/fetchLayoutDetail',
      payload: { layoutId: layoutId },
      callback: (data) => this._setDetail(data)
    })
  }

  _setDetail(data) {
    console.log('详情list', data)
    this.setState({ detailList: data })
  }

  _okHandle() {
    if (!this.state.authorId) {
      message.error('请选择作者');
      return;
    }
    const values = {
      authorId: this.state.authorId,
      authorName: this.state.authorName,
    }
    this.props.chooseAuthor(values);
    // form.resetFields();
  }

  _onRemove(type, file) {
    this.setState({ fileList: [] })
  }

  _beforeUpload(type, file) {
    const isLt1M = file.size / 1024 / 1024 < 1;
    if (!isLt1M) {
      message.error('图片大小不能超过1M');
      return false;
    }

    this.setState({ fileList: [file] })

    this.props.form.setFieldsValue({ name: file });


    return false;
  }

  _setModalVisible(type, flag) {
    this.setState({ goodsModalVisible: flag })
  }

  render() {
    const { form, record } = this.props;
    const { detail } = this.state;
    return (
      <Card title={'编辑布局（2行2列）'}>
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <Form style={{ width: '70%' }}>
            {
              (this.state.fileList.length > 0) ?
                <div className={styles.layoutImage}>
                  {this.state.fileList[0].name}
                </div>
                :
                <div className={styles.layoutImage}>
                  <img
                    style={{ width: '180px', height: '180px' }}
                    src={(detail && detail.pageImg) ? detail.pageImg : require('../../assets/padRecomm/pic0.png')}
                  />
                </div>
            }
            <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="图片">
              {form.getFieldDecorator('name', {
                rules: [{ required: true, message: '请选择图片' }],
                initialValue: detail ? detail.pageImg : null,
              })(
                <Upload
                  onRemove={(file) => this._onRemove(0, file)}
                  beforeUpload={(file) => this._beforeUpload(0, file)}
                  fileList={this.state.fileList}
                >
                  <Button >
                    <Icon type="upload" />选择图片
                    </Button>
                </Upload>
              )}
            </FormItem>
            <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="内容">
              {form.getFieldDecorator('goodsName', {
                rules: [{ required: true, message: '商品不能为空' }],
                initialValue: detail ? detail.goodsName : null,
              })(
                <span>
                  <Input disabled={true} style={{ width: '65%' }}></Input>
                  <Button
                    onClick={() => this._setModalVisible(0, true)}
                  >选择</Button>
                </span>
              )}
            </FormItem>
            <FormItem label="" style={{ display: 'none' }}>
              {form.getFieldDecorator('goodsId', {
                initialValue: detail ? detail.goodsId : null,
              })(
                <Input disabled={true} ></Input>
              )}
            </FormItem>

            <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="推荐语">
              {form.getFieldDecorator('recommMsg', {
                rules: [{ required: true, message: '推荐语不能为空' }],
                initialValue: detail ? detail.recommMsg : null,
              })(
                <span>
                  <Input maxLength={20}></Input>
                </span>
              )}
            </FormItem>

            <FormItem label="" style={{ display: 'none' }}>
              {form.getFieldDecorator('weight', {
                initialValue: detail ? detail.weight : 1,
              })(
                <Input disabled={true} ></Input>
              )}
            </FormItem>
          </Form>
        </div>


        <GoodsModal goodsModalVisible={this.state.goodsModalVisible}
          channelTree={this.props.channelTree}
          goodsList={this.props.goodsList}
          goodsId={this.state.currentGoodsId}
          setModalVisible={(type, flag) => this._setModalVisible(type, flag)}
          goodsSearch={(fieldsValue) => this._goodsSearch(fieldsValue)}
          goodsOk={(type, checkedData) => this._goodsOk(type, checkedData)}
        />
      </Card>

    );
  }
}